<template>
  <!-- 工具栏-->
  <div>
    <a-button size="middle" :span="6" @click="onZoom(0.2)">
      <ZoomInOutlined />
      放大</a-button
    >
    <a-button :span="6" @click="onZoom(-0.2)"> <ZoomOutOutlined />缩小</a-button>
    <a-button @click="screenfullClick">
      <FullscreenOutlined v-if="isFullscreen" />
      <FullscreenExitOutlined v-else />
      {{ isFullscreen ? "全屏展示" : "退出全屏" }}</a-button
    >
    <a-button @click="onUndo"><UndoOutlined />撤销</a-button>
    <a-button @click="onRedo"><RedoOutlined />取消撤销</a-button>
    <a-button @click.stop="onExportSVG"><CloudDownloadOutlined />导出为SVG</a-button>
    <a-button @click.stop="onExportPNG"><CloudDownloadOutlined />导出为PNG</a-button>
    <a-button @click="onSave"><DatabaseOutlined />保存数据</a-button>
    <a-button @click="onSave"><VerticalAlignBottomOutlined />导入流程数据</a-button>
  </div>
</template>
<script setup lang="ts">
import screenfull from "screenfull"
import { ZoomInOutlined, ZoomOutOutlined, UndoOutlined, RedoOutlined, FullscreenOutlined, FullscreenExitOutlined, CloudDownloadOutlined, DatabaseOutlined, VerticalAlignBottomOutlined } from "@ant-design/icons-vue"

const props = defineProps(["graph"])
const emits = defineEmits(["onSave"])
const isFullscreen = ref<boolean>(true)

/**
 * 放大 | 缩小
 * @param val 放大缩小的系数
 */
const onZoom = (val: number): void => {
  props.graph.zoom(val)
}

/**
 * 撤销
 */
const onUndo = (): void => {
  props.graph.canUndo() ? props.graph.undo() : null
}

/**
 * 取消撤销
 */
const onRedo = (): void => {
  props.graph.canRedo() ? props.graph.redo() : null
}

/**
 * 保存画板数据
 */
const onSave = (): void => {
  emits("onSave", props.graph.toJSON())
}

/**
 * 导出为svg
 */
const onExportSVG = (): void => {
  props.graph.exportSVG()
}

/**
 * 导出为png
 */
const onExportPNG = (): void => {
  props.graph.exportPNG({
    preserveDimensions: true,
  })
}

//全屏
const screenfullClick = () => {
  isFullscreen.value = screenfull.isFullscreen
  if (screenfull.isEnabled) screenfull.toggle()
}
</script>

<style scoped lang="less">
.ant-btn {
  margin: 0 5px;
}
</style>
